<div *ngIf="!isAddEdit" class="rightDiv">
  <div class="exciseTableDiv">
    <div class="searchDiv fl-r" style="margin-bottom: 15px">
      <label>
        <span>设备编号：</span>
        <input nz-input placeholder="请输入" [(ngModel)]="deviceNumber"/>
      </label>
      <label>
        <span>设备名称：</span>
        <input nz-input placeholder="请输入" [(ngModel)]="deviceName"/>
      </label>
      <label style="margin-right: 0">
        <button nz-button style="margin-right:10px" nzType="primary"
                (click)="pageInfo.first = 1;pageList()">查询
        </button>
        <button nz-button nzType="default"
                (click)="deviceNumber=null;deviceName=null;pageInfo.first = 1;pageList()">重置
        </button>
      </label>
    </div>
    <div class="tableTop fl-l" style="margin-bottom: 15px">
      <button nz-button nzType="primary" (click)="addbtn()">
        <i nz-icon nzType="plus" nzTheme="outline"></i>
        新增
      </button>
      <button nz-button nzType="default"
              nz-popconfirm
              nzOkType="danger"
              nzTitle="确定删除所选设备吗?"
              (nzOnCancel)="cancelFn()"
              (nzOnConfirm)="delete(null)"
              nzPlacement="top"
              [disabled]="canDelete"
      >
        <i nz-icon nzType="delete" nzTheme="outline"></i>删除
      </button>
      <button nz-button nzType="default" (click)="importShow()"><i nz-icon nzType="download" nzTheme="outline"></i>导入
      </button>
      <button nz-button nzType="default" (click)="exportShow()"><i nz-icon nzType="upload" nzTheme="outline"></i>导出
      </button>
    </div>
    <div style="margin-top: 35px;clear: both">
      <ng-template #totalTemplate let-total>总共 {{ pageInfo.totalRecords? pageInfo.totalRecords:0 }} 条</ng-template>
      <nz-table
        #deveceTable
        nzBordered
        [nzData]="list"
        [nzFrontPagination]="false"
        [nzShowPagination]="true"
        [nzPageIndex]="pageInfo.first"
        [nzTotal]="pageInfo.totalRecords"
        [nzShowTotal]="totalTemplate"
        [nzPageSize]="pageInfo.rows"
        [nzLoadingDelay]="1"
        [nzPageSizeOptions]="[10,20,30,50,100]"
        [nzShowQuickJumper]="true"
        [nzShowSizeChanger]="true"
        (nzPageIndexChange)="searchPageIndex($event)"
        (nzPageSizeChange)="searchPageSize($event)"
        (nzCurrentPageDataChange)="currentPageDataChange($event)"
      >
        <thead>
        <tr>
          <th class="tableCheck"
              nzShowCheckbox
              [(nzChecked)]="isAllCheck"
              [nzIndeterminate]="isIndeterminate"
              (nzCheckedChange)="checkAll($event)"
          ></th>
          <th>设备编号</th>
          <th>设备名称</th>
          <th>规格型号</th>
          <th hiddennzShowSort
              nzSortKey="deviceType"
              nzShowFilter
              [nzFilters]="deviceTypeList"
              (nzFilterChange)="filterSome($event, 'deviceType')"
          >
            设备类型
          </th>
          <th
            hiddennzShowSort
            nzSortKey="identifies"
            nzShowFilter
            [nzFilters]="deviceIdentifiesList"
            (nzFilterChange)="filterSome($event, 'identifies')">设备标识
          </th>
          <th>负责人</th>
          <th nzWidth="300px">所在房间</th>
          <th>IP地址</th>
          <th
            hiddennzShowSort
            nzSortKey="identifies"
            nzShowFilter
            [nzFilters]="statusList"
            (nzFilterChange)="filterSome($event, 'status')">设备状态
          </th>
          <th nzWidth="160px">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of deveceTable.data">
          <td
            nzShowCheckbox
            [(nzChecked)]="mapOfCheckedId[item.id]"
            (nzCheckedChange)="refreshStatus()"
          ></td>
          <td>{{item.number}}</td>
          <td>{{item.name}}</td>
          <td>{{item.specModel}}</td>
          <td>{{item.deviceType}}</td>
          <td>
            <span
              *ngFor="let identifies of pageServe.showNameBykeyList(deviceIdentifiesList,'keyValue','keyCode',item.identifies)">
              {{identifies}}
            </span>
          </td>
          <td>
            {{item.userName}}
          </td>
          <td>
            <span style="width: 300px;display: inline-block;" class="spance" title="{{item.roomName}}">{{item.roomName}}</span>
          </td>
          <td>{{item.ipAddr}}</td>
          <td>
            <span
              *ngFor="let status of pageServe.showNameBykeyList(statusList,'value','text',[item.status])">
              {{status}}
            </span>
          </td>
          <td>
            <span class="operaFont firOpera" (click)="editDevce(item.id,true)">
              查看
            </span>
            <span class="operaFont firOpera"
                  (click)="editDevce(item.id,false)">
              编辑
            </span>
            <span class="operaFont"
                  nz-popconfirm
                  nzOkType="danger"
                  [nzTitle]="'确定删除设备'+item.name+'吗?'"
                  (nzOnConfirm)="delete(item.id)"
                  nzPlacement="top"
            >删除</span>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>

<!--新增编辑-->
<div class="addEdit" *ngIf="isAddEdit">
  <div class="addEditDom flex flex-direction-column flex-space-between">
    <form class="addEditText" nz-form [formGroup]="validateForm">
      <div nz-row nzGutter="24">
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item class="gutter-box">
            <nz-form-label nzRequired [nzXs]="6" style="min-width: 100px">
              设备编号
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.number}}</span>
              <input [hidden]="isEdit" nz-input placeholder="请输入设备编号"
                     formControlName="number"
                     [(ngModel)]="device.number"/>
              <nz-form-explain *ngIf="validateForm.get('number')?.dirty && validateForm.get('number')?.errors">
                设备编号必填
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item style="min-width: 100px" class="gutter-box">
            <nz-form-label nzRequired [nzXs]="6" style="min-width: 100px">
              设备名称
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.name}}</span>
              <input [hidden]="isEdit" nz-input placeholder="请输入设备名称"
                     formControlName="name"
                     [(ngModel)]="device.name"/>
              <nz-form-explain *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors">
                设备名称必填
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item style="min-width: 100px" class="gutter-box">
            <nz-form-label nzRequired [nzXs]="6" style="min-width: 100px">
              规格型号
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.specModel}}</span>
              <input [hidden]="isEdit" nz-input placeholder="请输入规格型号"
                     formControlName="specModel"
                     [(ngModel)]="device.specModel"/>
              <nz-form-explain *ngIf="validateForm.get('specModel')?.dirty && validateForm.get('specModel')?.errors">
                规格型号必填
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row nzGutter="24">
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item class="gutter-box">
            <nz-form-label nzRequired [nzXs]="6" style="min-width: 100px">
              设备类型
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.specModel}}</span>
              <nz-select [hidden]="isEdit"
                         [(ngModel)]="device.deviceType"
                         formControlName="deviceType"
                         nzAllowClear nzPlaceHolder="请选择设备类型">
                <nz-option *ngFor="let item of deviceTypeList" [nzValue]="item.text"
                           [nzLabel]="item.text"></nz-option>
              </nz-select>
              <nz-form-explain *ngIf="validateForm.get('deviceType')?.dirty && validateForm.get('deviceType')?.errors">
                设备类型必选
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item style="min-width: 100px" class="gutter-box">
            <nz-form-label nzRequired [nzXs]="6" style="min-width: 100px">
              设备标识
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <div [hidden]="!isEdit">
                <span *ngFor="let identifies of device.identifies">
                    <span *ngFor="let item of deviceIdentifiesList">
                      <span *ngIf="item.keyValue === identifies">{{item.keyCode}}</span>
                    </span>
                </span>
              </div>
              <nz-select [hidden]="isEdit"
                         style="width: 100%"
                         formControlName="identifies"
                         [(ngModel)]="device.identifies"
                         nzMode="multiple"
                         nzPlaceHolder="请选择设备标识">
                <nz-option *ngFor="let option of deviceIdentifiesList"
                           [nzLabel]="option.text"
                           [nzValue]="option.keyValue"
                ></nz-option>
                <nz-form-explain
                  *ngIf="validateForm.get('identifies')?.dirty && validateForm.get('identifies')?.errors">
                  设备标识必选
                </nz-form-explain>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item style="min-width: 100px" class="gutter-box">
            <nz-form-label nzRequired [nzXs]="6" style="min-width: 100px">
              设备状态
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <div [hidden]="!isEdit">
                <span *ngFor="let status of statusList">
                  <span *ngIf="status.value===device.status">{{status.text}}</span>
                </span>
              </div>
              <nz-select [hidden]="isEdit" style="width: 100%;" formControlName="status" [(ngModel)]="device.status"
                         nzAllowClear
                         nzPlaceHolder="请选择设备状态">
                <nz-option *ngFor="let item of statusList" [nzValue]="item.value" [nzLabel]="item.text"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row nzGutter="24">
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item class="gutter-box">
            <nz-form-label nzRequired [nzXs]="6" style="min-width: 100px">
              负责人
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span *ngFor="let item of userList" [hidden]="!isEdit">
                <span *ngIf="item.id===device.userId">{{item.name}};</span>
              </span>
              <nz-select [hidden]="isEdit" style="width: 100%;" formControlName="userId" [(ngModel)]="device.userId"
                         nzAllowClear
                         nzPlaceHolder="请选择负责人">
                <nz-option *ngFor="let item of userList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item style="min-width: 100px" class="gutter-box">
            <nz-form-label nzRequired [nzXs]="6" style="min-width: 100px">
              所在房间
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.roomName}}</span>
              <nz-input-group [hidden]="isEdit" nzSearch [nzAddOnAfter]="suffixButton">
                <input [hidden]="isEdit" nz-input placeholder="请选择房间"
                       formControlName="roomName"
                       [(ngModel)]="device.roomName" disabled/>
                <input nz-input
                       hidden
                       formControlName="roomId"
                       [(ngModel)]="device.roomId" disabled/>
              </nz-input-group>
              <ng-template #suffixButton>
                <button nz-button nzType="default" nzSearch (click)="isRoom=true">选择</button>
              </ng-template>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item style="min-width: 100px" class="gutter-box">
            <nz-form-label [nzXs]="6" style="min-width: 100px">
              安装位置
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.installPos}}</span>
              <input [hidden]="isEdit" nz-input placeholder="请输入安装位置"
                     formControlName="installPos"
                     [(ngModel)]="device.installPos"/>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row nzGutter="24">
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item class="gutter-box">
            <nz-form-label [nzXs]="6" style="min-width: 100px">
              采购日期
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.buyDate}}</span>
              <nz-date-picker [hidden]="isEdit" style="width: 100%;"
                              [(ngModel)]="buyDate"
                              formControlName="buyDate"
                              nzPlaceHolder="请选择采购时间"
              >
              </nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item style="min-width: 100px" class="gutter-box">
            <nz-form-label [nzXs]="6" style="min-width: 100px">
              供应商
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.supplier}}</span>
              <input [hidden]="isEdit" nz-input placeholder="请输入供应商"
                     formControlName="supplier"
                     [(ngModel)]="device.supplier"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item style="min-width: 100px" class="gutter-box">
            <nz-form-label [nzXs]="6" style="min-width: 100px">
              生产商
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.manufacturer}}</span>
              <input [hidden]="isEdit" nz-input placeholder="请输入生产商"
                     formControlName="manufacturer"
                     [(ngModel)]="device.manufacturer"/>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row nzGutter="24">
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item class="gutter-box">
            <nz-form-label [nzXs]="6" style="min-width: 100px">
              生产日期
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.buildDate}}</span>
              <nz-date-picker [hidden]="isEdit" style="width: 100%;"
                              [(ngModel)]="buildDate"
                              formControlName="buildDate"
                              nzPlaceHolder="请选择生产日期"
              >
              </nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item style="min-width: 100px" class="gutter-box">
            <nz-form-label [nzXs]="6" style="min-width: 100px">
              国资标号
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.gradeCode}}</span>
              <input [hidden]="isEdit" nz-input placeholder="请输入国资标号"
                     formControlName="gradeCode"
                     [(ngModel)]="device.gradeCode"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <nz-form-item style="min-width: 100px" class="gutter-box">
            <nz-form-label [nzXs]="6" style="min-width: 100px">
              备注
            </nz-form-label>
            <nz-form-control [nzXs]="16">
              <span [hidden]="!isEdit">{{device.remark}}</span>
              <textarea [hidden]="isEdit" nz-input rows="2" formControlName="remark" [(ngModel)]="device.remark"
                        placeholder="请输入备注信息"></textarea>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row class="flex flex-align-start">
        <span style="min-width: 100px;width: 8.1%;">
          <nz-form-label [nzXs]="24">
              设备图片
          </nz-form-label>
        </span>
        <div style="flex: 1;">
          <div class="clearfix" style="padding-top: 7px;">
            <nz-upload
              class="upload-list-inline"
              [nzAction]="uploadUrl"
              [nzHeaders]="headerInfo"
              [nzData]="{'moduleName': 'device-manage'}"
              nzListType="picture-card"
              [nzRemove]="deleteFlile"
              (nzChange)="getUploadInfo($event)"
              [(nzFileList)]="fileList"
              nzAccept="'.png,.jpg,.jpeg,.bmg'"
              [nzShowUploadList]="showUploadList"
              nzFileType="image/png,image/jpg,image/jpeg,image/bmp,image/gif"
              [nzDisabled]="isEdit"
              [nzPreview]="handlePreview"
              [nzMultiple]="true"
            >
              <i nz-icon nzType="plus"></i>
              <div class="ant-upload-text">设备图片</div>
            </nz-upload>
            <nz-modal
              [nzVisible]="previewVisible"
              [nzContent]="modalContent"
              [nzFooter]="null"
              (nzOnCancel)="previewVisible = false"
            >
              <ng-template #modalContent>
                <img [src]="previewImage" [ngStyle]="{ width: '100%' }"/>
              </ng-template>
            </nz-modal>
          </div>
        </div>
      </div>
      <div nz-row class="flex flex-align-start" style="margin-top: 20px;">
        <span style="min-width: 100px;width: 8.1%;">
          <nz-form-label [nzXs]="24">
              设备简介
          </nz-form-label>
        </span>
        <div style="flex: 1;width: 90%">
          <div [hidden]="isEdit" class="clearfix" style="padding-top: 7px;margin-bottom: 10px">
            <nz-upload [nzAction]="uploadUrlDoc"
                       [nzHeaders]="headerInfo"
                       [nzFileList]="fileDocList"
                       (nzChange)="getUploadDoc($event)"
                       [nzLimit]="1"
                       [nzAccept]="'.doc,.docx'"
            >
              <button nz-button nzType="primary" [hidden]="isEdit">
                <i nz-icon nzType="download" nzTheme="outline"></i>
                导入文档
              </button>
              <span [hidden]="isEdit" style="padding-left: 15px;">支持扩展名：.doc,.docx</span>
            </nz-upload>
          </div>
          <umeditor
            formControlName="introduce"
            [(ngModel)]="device.introduce"
            [config]="'assets/umeditor/umeditor.config.js'"
            [path]="'assets/umeditor/'"
            [loadingTip]="'加载中……'"
          ></umeditor>
        </div>
      </div>
    </form>
    <div class="addEditBtn flex flex-justify-center">
      <button nz-button nzType="primary" [disabled]="!validateForm.valid" (click)="submit()" [hidden]="isEdit">
        提&nbsp;&nbsp;交
      </button>
      <button nz-button nzType="default" (click)="isAddEdit=false">
        返&nbsp;&nbsp;回
      </button>
    </div>
  </div>
</div>

<!--选择房间-->
<nz-modal [(nzVisible)]="isRoom"
          nzWidth="555px"
          [nzTitle]="roomTitle"
          [nzContent]="roomContent"
          (nzOnCancel)="isRoom = false"
          [nzFooter]="roomModel"
>
  <ng-template #roomTitle>
    选择房间
  </ng-template>
  <ng-template #roomContent>
    <div style="max-height: 400px;overflow-x: hidden;">
      <div *ngFor="let xq of roomTree">
        <h3>{{xq.title}}：</h3>
        <div style="padding-left: 25px;" *ngFor="let build of xq.children">
          <h4>{{build.title}}：</h4>
          <div *ngFor="let floor of build.children" class="flex" style="padding-bottom: 10px;padding-left: 10px;">
            <span style="width: 50px;text-align: right;">{{floor.title}}:</span>
            <div style="flex: 1;margin-left: 10px">
              <nz-radio-group [(ngModel)]="roomInfo" nzName="floor" (ngModelChange)="getRoomInfo($event)">
                <label *ngFor="let room of floor.children" nz-radio
                       [nzValue]="[room.key,build.title+'/'+floor.title+'/'+room.title]" class="spance" style="max-width: 350px" title="{{room.title}}">{{room.title}}</label>
              </nz-radio-group>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-template>
  <ng-template #roomModel>

  </ng-template>
</nz-modal>

<!--设备信息导入-->
<nz-modal [(nzVisible)]="showExcelModal"
          nzWidth="680px"
          [nzTitle]="modalTitle3"
          [nzContent]="modalContent3"
          (nzOnCancel)="showExcelModal = false"
          [nzFooter]="footModel3"
          nzMaskClosable="false"
>
  <ng-template #modalTitle3>
    设备信息导入
  </ng-template>
  <ng-template #modalContent3>
    <div class="modal-hei over-y">
      <div class="line-3">
        <span>1.下载导入模板</span>
        <span class="color-blue m-l-xs-5 cursor" (click)="exportExclShow()">点击下载</span>
      </div>
      <div class="line-3">
        <span>2.按条件填写信息</span>
      </div>
      <div class="w100">
        <table class="table table-bordered">
          <thead>
          <tr>
            <th>楼栋</th>
            <th>楼层</th>
            <th>房间号</th>
            <th>设备编号</th>
            <th>设备名称</th>
            <th>规格型号</th>
            <th>设备类型</th>
            <th>设备标识</th>
            <th>IP地址</th>
            <th>设备状态</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>选填</td>
            <td>必填</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="line-3">
        <span>3.上传填好的文档</span>
        <nz-upload
          [nzShowUploadList]="false"
          [nzData]="{'moduleName': 'student'}"
          [(nzFileList)]="fileListImport"
          [nzBeforeUpload]="beforeUpload"
          nzAccept=".xls,.xlsx"
        >
          <span class="color-blue m-l-xs-5 cursor">点击上传 &nbsp;</span>
        </nz-upload>
        <span class="color-blue m-l-xs-5" *ngIf="importExcelName">
            {{importExcelName}}
          <i nz-icon style="margin-left:10px;cursor: pointer;" title="删除" nzType="close-circle" nzTheme="outline"
             (click)="delFile()"></i>
          </span>
      </div>
      <div class="line-3">
        <span>4.点击确定按钮导入文档</span>
      </div>
    </div>
  </ng-template>
  <ng-template #footModel3>
    <button nz-button nzType="default"
            (click)="showExcelModal = false;this.fileListImport = [];this.importExcelName = '';">取消
    </button>
    <button nz-button nzType="primary" (click)="handleUpload()">确定</button>
  </ng-template>
</nz-modal>
